<template>
  <div class="left-chart-1">
    <dv-charts class="lc1-chart" :option="option" />
    <dv-decoration-2 style="height:10px;" />
  </div>
</template>

<script>
export default {
  name: "CmpBarChart",
  data() {
    return {
      option: {
        title: {
          text: "柱线混用图",
          style: { fill: "#fff", fontSize: 24, textAlign: "center" }
        },
        legend: {
          data: [
            {
              name: "降雨量",
              color: "#aeeff0"
            },
            {
              name: "气温",
              color: "#f1829f"
            }
          ],
          bottom: 10,
          textStyle: {
            fontFamily: "Arial",
            fontSize: 12,
            fill: "#409eff"
          }
        },
        xAxis: {
          data: [
            "一月份",
            "二月份",
            "三月份",
            "四月份",
            "五月份",
            "六月份",
            "七月份",
            "八月份",
            "九月份",
            "十月份",
            "十一月份",
            "十二月份"
          ],
          axisLabel: {
            style: {
              fill: "#fff",
              rotate: 20,
              textAlign: "left",
              textBaseline: "top"
            }
          },
          axisTick: {
            show: false,
            style: {
              stroke: "#fff"
            }
          }
        },
        yAxis: [
          {
            name: "降雨量",
            data: "value",
            min: 0,
            max: 300,
            interval: 50,
            splitLine: {
              style: {
                lineDash: [3, 3]
              }
            },
            axisLabel: {
              style: {
                fill: "#fff"
              },
              formatter: "{value} ml"
            },
            axisTick: {
              show: false
            }
          },
          {
            name: "气温",
            data: "value",
            position: "right",
            min: 0,
            max: 30,
            interval: 5,
            splitLine: {
              show: false
            },
            axisLabel: {
              style: {
                fill: "#fff"
              },
              formatter: "{value} °C"
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "降雨量",
            data: [175, 125, 90, 130, 45, 65, 65, 47, 50, 52, 45, 37],
            type: "bar",
            gradient: {
              color: ["#37a2da", "#67e0e3"]
            },
            animationCurve: "flash"
          },
          {
            name: "气温",
            data: [23, 18, 16, 14, 10, 8, 6, 6, 6, 6, 6, 5],
            type: "line",
            yAxisIndex: 1,
            animationCurve: "flash"
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss">
.left-chart-1 {
  width: 100%;
  height: 37%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;

  .lc1-header {
    text-align: center;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    margin-bottom: 20px;
  }

  .lc1-details {
    height: 50px;
    font-size: 16px;
    display: flex;
    align-items: center;
    text-indent: 20px;

    span {
      color: #096dd9;
      font-weight: bold;
      font-size: 35px;
      margin-left: 20px;
    }
  }

  .lc1-chart {
    flex: 1;
  }
}
</style>
